<template>
    <div class="login-container">
        <div class="login-content">
            <div class="welcome-text">
                <h1>Welcome Back</h1>
                <p>欢迎使用智面宝典</p>
            </div>

            <div class="login-form">
                <div class="input-group">
                    <label>邮箱</label>
                    <input type="email" v-model="loginForm.email" placeholder="请输入邮箱">
                </div>

                <div class="input-group">
                    <label>密码</label>
                    <input type="password" v-model="loginForm.password" placeholder="请输入密码">
                </div>

                <button class="login-btn" @click="handleLogin">登录</button>
                <div class="register-link" @click="goToRegister">注册账号</div>
            </div>
        </div>
    </div>
</template>

<script setup>
defineOptions({
    name: 'LoginPage'
})

import { reactive } from "vue";
import { useRouter } from "vue-router";
import { getUserLogin } from "./api/login";
import { showToast } from "vant";
import { useUserStore } from "@/stores/user";

const router = useRouter();
const userStore = useUserStore();

const loginForm = reactive({
    email: '',
    password: ''
})

//登录
const handleLogin = async () => {
    // 邮箱正则
    const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
    // 密码正则：6-16位字母、数字、特殊字符
    const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,16}$/;

    if (loginForm.email === '') {
        showToast('请输入邮箱');
    }else if (!emailRegex.test(loginForm.email)) {
        showToast('请输入正确的邮箱格式');
    }else if (loginForm.password === '') {
        showToast('请输入密码');
    } else if (!passwordRegex.test(loginForm.password)) {
        showToast('密码必须包含大小写字母和数字，长度在8到16个字符之间');
    } else {
        try {
            const res = await getUserLogin({
                email: loginForm.email,
                password: loginForm.password
            });

            if (res.data.code === 200) {
                const userData = res.data.data;
                userStore.setToken(userData.token);
                userStore.setUseInfo({
                    id: userData.id,
                    username: userData.username,
                    email: userData.email,
                    avatar: userData.avatar,
                    phone: userData.phone,
                    majorId: userData.majorId,
                    role: userData.role,
                    majorName: userData.majorName
                });
                showToast('登录成功');
                router.push('/');
            } else {
                showToast(res.data.message || '登录失败');
            }
        } catch (error) {
            console.error('登录错误:', error);
            showToast('登录请求失败');
        }
    }
}

const goToRegister = () => {
    router.push('/regist');
}

</script>

<style lang="scss" scoped>
.login-container {
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(135deg, #e6f3ff 0%, #b6d9ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;

    .login-content {
        width: 100%;
        max-width: 400px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 24px;
        padding: 30px;
        box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
        backdrop-filter: blur(4px);

        .welcome-text {
            text-align: center;
            margin-bottom: 40px;

            h1 {
                color: #333;
                font-size: 28px;
                margin-bottom: 8px;
            }

            p {
                color: #666;
                font-size: 16px;
            }
        }

        .login-form {
            .input-group {
                margin-bottom: 20px;

                label {
                    display: block;
                    color: #333;
                    margin-bottom: 8px;
                    font-size: 14px;
                }

                input {
                    width: 100%;
                    padding: 12px 16px;
                    border: 1px solid #ddd;
                    border-radius: 12px;
                    font-size: 16px;
                    transition: all 0.3s;
                    background: rgba(255, 255, 255, 0.9);

                    &:focus {
                        outline: none;
                        border-color: #4a90e2;
                        box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
                    }

                    &::placeholder {
                        color: #999;
                    }
                }
            }

            .login-btn {
                width: 100%;
                padding: 14px;
                background: #4a90e2;
                color: white;
                border: none;
                border-radius: 12px;
                font-size: 16px;
                cursor: pointer;
                transition: all 0.3s;
                margin-top: 20px;

                &:hover {
                    background: #357abd;
                }

                &:active {
                    transform: scale(0.98);
                }
            }

            .register-link {
                text-align: center;
                margin-top: 20px;
                color: #4a90e2;
                cursor: pointer;
                font-size: 14px;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}
</style>